<template>
    <div
        style="padding-top: 40px"
        v-loading="pageLoading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div style="margin: 5px 10px 30px 15px">
            <!-- 1. 基础信息 -->
            <div>
                <!-- 标题 -->
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">基础信息</h3>
                    </el-col>
                </el-row>

                <!-- 内容 -->
                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="转让标的名称">
                                <el-input v-model="infoForm.name" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="项目编号">
                                <el-input v-model="infoForm.number" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="转让底价" required="true">
                                <el-input v-model="infoForm.transferBasePrice" placeholder="请输入低价(数字，单位万元)" :disabled="isEdit" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 2. 报价方式 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">报(竞)价方式</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="报价结束时间">
                                <el-date-picker
                                    v-model="infoForm.offerEndTime"
                                    type="datetime"
                                    placeholder="选择报价结束时间(必填)"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="isEdit"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报价规则">
                                <el-input
                                    v-model="infoForm.offerRule"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报价标的简介">
                                <el-input
                                    v-model="infoForm.transferBrief"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 3. 竞买登记 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">竞买登记</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报名方式">
                                <el-input
                                    v-model="infoForm.applyWay"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="看样时间">
                                <el-date-picker
                                    v-model="infoForm.seeTime"
                                    type="datetime"
                                    placeholder="选择看样时间"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="isEdit"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="看样地点">
                                <el-input v-model="infoForm.seeSite" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="保证金及处理方式">
                                <el-input
                                    v-model="infoForm.earnestMoney"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 4. 交易方式 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">交易方式</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="18">
                            <el-form-item label="交易地点">
                                <el-input v-model="infoForm.dealSity" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="成交确认、价款支付及合同签订">
                                <el-input v-model="infoForm.affirm" placeholder="" type="textarea" :rows="10" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="转让标的交割">
                                <el-input
                                    v-model="infoForm.transferDelivery"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="风险提示">
                                <el-input
                                    v-model="infoForm.riskHint"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="其他事项">
                                <el-input
                                    v-model="infoForm.otherThing"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="联系方式">
                                <el-input
                                    v-model="infoForm.contactWay"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="附件">

                                <moreUpFile
                                    :isShowFileList="true"
                                    @moreUpFileSuccessHandle="moreUpFileSuccessHandle"
                                    @moreUpFileErrorHandle="moreUpFileErrorHandle"
                                    @moreUpFileHandlePreview="moreUpFileHandlePreview"
                                >
                                </moreUpFile>

                                
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import moreUpFile from '../../components/upLoad/moreUpFile';

export default {
    components: {
        moreUpFile
    },
    data() {
        return {
            pageLoading: false,
            isEdit: false,

            //- 基础信息
            infoForm: {
                name: '', //转让标的名称
                number: '', //项目编号
                transferBasePrice: '', //转让底价

                offerEndTime: '', //报价结束时间
                offerRule: '', //报价规则
                transferBrief: '', //转让标的简介

                applyWay: '', //报名方式
                seeSite: '', //看样地点
                seeTime: '', //看样时间
                earnestMoney: '', //保证金及处理方式

                dealSity: '', //交易地点
                affirm: '', //成交确认、价款支付及合同签订
                transferDelivery: '', //转让标的交割
                riskHint: '', //风险提示
                otherThing: '', //其他事项
                contactWay: '', //联系方式

                attachment: '' //附件
            },

            //- 公用
            pageFlag: '',
            pageData: null
        };
    },
    mounted() {
        var itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        if (type == 2) {
            var id = itemData.id;

            this.getPageDeail(id); // 获取基本信息
        }

        this.dialogType = type;
    },

    methods: {
        //上传附件 成功回调
        moreUpFileSuccessHandle([url, sigleImgId, response, file, fileList]) {
            this.infoForm.attachment = sigleImgId;
            console.log('上传id：', sigleImgId);
        },
        //上传附件 失败回调
        moreUpFileErrorHandle(val) {
            this.$message.error(`文件上传失败`);
        },

        //上传附件 文件预览回调
        moreUpFileHandlePreview(file) {
            console.log('文件预览回调', file);
            window.location.href =
                window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + file.response.result[0];
        },

        // 获取页面详情
        getPageDeail(id) {
            var _that = this;

            var tick;
            let params = {
                id: id
            };

            _that.pageLoading = true;

            //详情
            API.iapropertyright.lookiaPropertyRightDetail(params).then((res) => {
                if (res.code == '0000') {
                    console.log(res);

                    _that.pageData = res.result;
                    _that.infoForm = res.result;

                    _that.pageLoading = false;
                }
            });
        },
        // 表单提交
        dataFormSubmit() {
            this.$refs['infoForm'].validate((valid) => {
                if (valid) {
                    let params = cloneDeep(this.infoForm);
                    var tick =
                        this.dialogType == 1
                            ? API.iapropertyright.addiaPropertyRight(params)
                            : API.iapropertyright.editiaPropertyRight(params);

                    tick.then((data) => {
                        if (data.code == '0000') {
                            this.$message({
                                message: `${this.dialogType == 2 ? '修改成功' : '新增成功'}`,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.closePage();
                                }
                            });
                        }
                    });
                }
            });
        },
        closePage() {
            this.$router.go(-1);
        }
    }
};
</script>